<template>
  <div class="home-wrapper">    
    <header>
      <div class="search">
        <van-search @search="handleSearch" v-model="keyword" shape="round" placeholder="火锅底料" />
        <button @click="handleSearch(keyword)">搜索</button>
      </div>
    </header>
    <div class="content-wrapper">
      <!-- 轮播图 -->
      <Swiper class="swiper" :goodsList="state.goodsList"/>
      <!-- 品类列表 -->
      <div class="category-list">
        <div class="category-item" @click="toCategory(item.id)" v-for="item in state.categoryList" :key="item.id">
          <img :src="item.image" alt="分类图片">
          <span>{{ item.title }}</span>
        </div>
      </div>
      <!-- 商品展示：瀑布流布局 -->
      <GoodsList :goodsList="state.goodsList" />
    </div>

    <TabBar :cart_badge="cartCount"/>
    <van-back-top style="background-color: #5ac6f5;" bottom="2rem" right="1.3rem" />

  </div>
</template>

<script setup>
import TabBar from '../components/Tabbar.vue'
import Swiper from '../components/Swiper.vue'
import GoodsList from '../components/GoodsList.vue';
import axios from '../utils/axios.js'
import { useStore } from 'vuex';
import { onMounted, reactive, ref, computed } from 'vue'
import { useRouter } from 'vue-router';

const state = reactive({
  // 菜品分类图列表
  categoryList: [],
  // 菜品列表
  goodsList: [],
  // 购物车中商品总数
})

onMounted(() => {
  axios.get('/inquire').then((res) => {
    state.goodsList = res.data
  })
  axios.get('/catelist').then((res) => {
    // 只取前四种菜品分类
    state.categoryList = res.data.slice(0, 4)
    // console.log(res.data)
  })
  store.dispatch('fetchCartCount')
})

const router = useRouter()

const store = useStore()

const cartCount = computed(() => store.state.cartCount)

// 搜索关键词
const keyword = ref('')
// 跳转至搜索页
const handleSearch = (keyword) => {
  router.push({ path: 'search', query: { search: keyword }});
  // console.log(keyword)
}

const toCategory = (id) => {
  // console.log(`${route}`)
  // router.push(`/menu/${route}`)
  router.push({ path: '/menu', query: { id: id }})
}
</script>

<style lang="less"  scoped>
.home-wrapper{
  padding: 0 0.2rem;
  .search{
    position: relative;
    button{
      color: #fff;
      background-color: #4aa44a;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      border: 1px solid transparent;
      border-radius: 0.6rem;
      position: absolute;
      top: 10px;
      right: 13px;
    }
  }
  .content-wrapper{
    padding: 0 0.2rem;
    height: 100%;
    padding-bottom: 50px;
    // 轮播图
    .swiper{
      border-radius: 8px;
    }
    // 商品分类列表
    .category-list{
      // background-color: #fff;
      padding: 10px 0;
      display: flex;
      margin: 10px 0;
      border-radius: 8px;
      .category-item{
        display: flex;
        // flex布局主轴改为y轴
        flex-direction: column;
        // 让子元素在交叉轴x轴上居中排布
        align-items: center;
        width: 25%;
        img{ 
          width: 50px;
        }
        span{
          margin-top: 5px;
        }
      }
    }
  }
}
</style>

<style>
.van-search{
  height: 50px;
  background-color: #f3f5f7;
}
.van-search__content.van-search__content--round{
  background-color: #fff;
}
.van-sidebar{
  height: calc(100vh - 100px);
  background-color: #f7f8fa;
}
</style>